<template>
  <view class="homeLayout pageBg">
    <custom-nav-bar></custom-nav-bar>
    <!-- 轮播图区域 -->
    <view class="banner">
      <swiper
        circular
        indicator-dots 
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="#fff" 
        autoplay
        class="swiper-container"
      >
        <swiper-item v-for="item in 3" :key="item">
          <image 
            class="swiper-image" 
            :src="`../../common/images/banner${item}.jpg`" 
            mode="aspectFill"
          />
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 公告栏 -->
    <view class="notice" @click="goToNoticeDetail" url="/pages/notice/detail">
      <view class="left">
        <image 
          src="" 
          mode="widthFix" 
          style="width:20px;height:20px"
        />
        <text class="text">公告</text>
      </view>
      <view class="center">
        <swiper 
          vertical 
          autoplay 
          interval="1500" 
          duration="300" 
          circular
          class="notice-swiper"
        >
          <swiper-item v-for="(item, index) in notices" :key="index">
            <text class="notice-text">{{ item }}</text>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <image 
          src="" 
          mode="widthFix" 
          style="width:16px;height:16px"
        />
      </view>
    </view>
    
    <!-- 每日推荐 -->
    <view class="select">
      <common-title>
        <template #name>每日推荐</template>
        <template #custom>
          <view class="date-container">
            <uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
            <text class="date-text">{{ formattedDate }}</text>
          </view>
        </template>
      </common-title>
      <view class="content">
        <scroll-view scroll-x class="scroll-content">
          <view 
            class="box" 
            v-for="item in dailyRecommendations" 
            :key="item.id"
            @click="goPreview(item)"
          >
            <image :src="item.imageUrl" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 专题精选 -->
    <view class="theme">
      <common-title>
        <template #name>专题精选</template>
        <template #custom>
          <navigator url="" class="more">More+</navigator>
        </template>
      </common-title>
      
      <view class="content">
        <theme-item 
          v-for="item in featuredCollections" 
          :key="item.id"
          :data="item"
          @click="goPreview(item)"
        />
        <theme-item :is-more="true"></theme-item>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
const formattedDate = ref(dayjs().format('M月D日'));

const notices = [
  "1：墨染壁纸新版本上线",
  "2：参与活动赢取会员",
  "3：反馈建议送积分",
  "4：节假日客服调整"
];

// 每日推荐数据
const dailyRecommendations = ref([
  { id: 1, imageUrl: "../../static/preview_small.webp", title: "自然风光" },
  { id: 2, imageUrl: "../../static/preview_small2.webp", title: "城市夜景" },
  { id: 3, imageUrl: "../../static/preview_small3.webp", title: "动漫合集" },
  { id: 4, imageUrl: "../../static/preview_small4.webp", title: "动物世界" },
  { id: 5, imageUrl: "../../static/preview_small5.webp", title: "星空宇宙" },
  { id: 6, imageUrl: "../../static/preview_small6.webp", title: "美食摄影" },
  { id: 7, imageUrl: "../../static/preview_small7.webp", title: "旅行风景" },
  { id: 8, imageUrl: "../../static/preview_small8.webp", title: "极简主义" }
]);

// 专题精选数据
const featuredCollections = ref([
  { id: 101, imageUrl: "../../static/theme1.jpg", title: "春季特辑", count: 56 },
  { id: 102, imageUrl: "../../static/theme2.jpg", title: "城市建筑", count: 42 },
  { id: 103, imageUrl: "../../static/theme3.jpg", title: "动漫世界", count: 38 },
  { id: 104, imageUrl: "../../static/theme4.jpg", title: "自然奇观", count: 64 },
  { id: 105, imageUrl: "../../static/theme5.jpg", title: "动物王国", count: 47 },
  { id: 106, imageUrl: "../../static/theme6.jpg", title: "极简风格", count: 35 }
]);

// 跳转到公告详情页
const goToNoticeDetail = () => {
  uni.navigateTo({
    url:"/pages/notice/detail"
  });
};

// 跳转到预览页
const goPreview = (item) => {
  uni.navigateTo({
    url: `/pages/preview/preview?id=${item.id}&title=${encodeURIComponent(item.title)}`
  });
};
</script>

<style lang="scss" scoped>
.homeLayout {
  width: 100%;
  padding-bottom: 30rpx;
  
  .banner {
    width: 100%;
    height: 300rpx;
    position: relative;
    z-index: 1;
    
    .swiper-container {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      overflow: hidden;
      
      .swiper-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .notice {
    width: 690rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.9);
    margin: 20rpx auto;
    border-radius: 80rpx;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .left {
      width: 140rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      
      .text {
        margin-left: 10rpx;
        font-size: 26rpx;
        color: #28b389;
        font-weight: 500;
      }
    }
    
    .center {
      flex: 1;
      height: 100%;
      
      .notice-swiper {
        height: 100%;
        
        .notice-text {
          line-height: 80rpx;
          font-size: 26rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #28b389;
        }
      }
    }
    
    .right {
      width: 70rpx;
      display: flex;
      justify-content: center;
    }
  }

  .select {
    padding-top: 50rpx;
     
    :deep(.common-title) {
      display: block;
    }
    
    .date-container {
      display: flex;
      align-items: center;
      margin-left: 10rpx;
      
      .date-text {
        margin-left: 5rpx;
        color: #28b389;
        font-size: 28rpx;
      }
    }

    .content {
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;
      
      .scroll-content {
        white-space: nowrap;
        
        .box {
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;
          border-radius: 16rpx;
          overflow: hidden;
          box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
          transition: transform 0.3s;
          
          &:active {
            transform: scale(0.96);
          }
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .box:last-child {
          margin-right: 30rpx;
        }
      }
    }
  }

  .theme {
    padding-top: 50rpx;
    
    .more {
      font-size: 32rpx;
      color: #888;
      padding-right: 10rpx;
    }
    
    .content {
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: grid;
      gap: 20rpx;
      grid-template-columns: repeat(3, 1fr);
      
      & > * {
        min-height: 340rpx;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
      }
    }
  }
}
</style>